<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/10/1
  Time: 16:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <%--引入vue的js--%>
  <script src="../../js/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../js/index.js"></script>
  <!--引入axios的依赖-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- import CSS -->
  <link rel="stylesheet" href="../../css/index.css">
  <style>
    #head{
      position: relative;
      top: -35px;
    }
  </style>
</head>
<body>

<div id="app">
  <!--    表头-->
  <el-form :inline="true" :model="branchSearchForm" class="demo-form-inline">

    <el-form-item label="">
      <el-select v-model="branchSearchForm.branchid" placeholder="部门">
        <el-option  label="请选择你的店铺"  value=""></el-option>
        <el-option v-for="d in branchSearch" :label="d.branchname" :value="d.branchid"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="branchup">提交</el-button>
    </el-form-item>
  </el-form>
  <br>
  <%--   主表头部按钮 --%>
  <div id="head">
  <el-button type="success" @click="plout">批量出库</el-button>
  <el-button type="success" @click="pdout">平调商品</el-button>
  <el-button type="success" @click="newGoods">刷新</el-button>
  </div>
  <%-- 主体表格--%>
  <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'15px'}"
          :cell-style="tableCellStyle"
          border
          @selection-change="handleSelectionChange">
    <el-table-column
            fixed="left"
            type="selection"
            width="55">
    </el-table-column>
    <el-table-column
            fixed="left"
            prop="goodsid"
            label="商品编号"
            sortable
            width="120">
    </el-table-column>
    <el-table-column
            prop="url"
            label="商品图片"
            width="140">
      <template slot-scope="scope">
        <img :src="scope.row.url" alt="" width="120" height="45">
      </template>
    </el-table-column>
    <el-table-column
            prop="goodsname"
            label="商品名称"
            width="150">
    </el-table-column>
    <el-table-column
            prop="layout"
            label="键盘布局"
            width="100">
    </el-table-column>
    <el-table-column
            prop="keycapname"
            label="键帽材质"
            width="120">
    </el-table-column>
    <el-table-column
            prop="keyboardcolorname"
            label="键盘颜色"
            width="120">
    </el-table-column>
    <el-table-column
            prop="shafttype"
            label="轴体类型"
            width="120">
    </el-table-column>
    <el-table-column
            prop="shaftchoose"
            label="轴体选择"
            width="120">
    </el-table-column>
    <el-table-column
            prop="interfacetype"
            label="接口类型"
            width="120">
    </el-table-column>
    <el-table-column
            prop="backlightcolorname"
            label="背光颜色"
            width="120">
    </el-table-column>
    <el-table-column
            prop="cprice"
            label="商品进价"
            width="120">
    </el-table-column>
    <el-table-column
            prop="sprice"
            label="商品售价"
            width="120">
    </el-table-column>
    <el-table-column
            prop="branchname"
            label="店铺名称"
            width="120">
    </el-table-column>
    <el-table-column
            fixed="right"
            prop="counts"
            label="商品数量"
            width="120">
    </el-table-column>
    <el-table-column
            fixed="right"
            prop="num"
            label="出库数量"
            width="120">
      <template slot-scope="scope">
        <el-input v-model="scope.row.num" type="text"/>
      </template>
    </el-table-column>

    <el-table-column
            fixed="right"
            label="操作"
            width="120">
      <template slot-scope="scope">
        <el-button
                @click.native.prevent="upRow(scope.$index, tableData)"
                type="text"
                size="small">
          <el-tag
                  key="零售"
                  type='success'
                  effect="dark">
            零售
          </el-tag>
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--分页组件：
            @size-change:触发 改变每页显示的记录条数
            @current-change: 改变页码时触发的函数
            current-page: 显示的当前页面
            page-sizes: 页面大小的下拉框
            page-size: 默认每页显示的条数
            total: 总条数
       -->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>


  <%--    平调弹出层--%>
  <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="70%"
          :before-close="handleClose">
    <el-form :inline="true" :model="branchSearchForm2" class="demo-form-inline">

      <el-form-item label="">
        <el-select v-model="branchSearchForm2.branchid" placeholder="部门">
          <el-option  label="请选择你的店铺"  value=""></el-option>
          <el-option v-for="d in branchSearch2" :label="d.branchname" :value="d.branchid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="branchup">查询</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</div>

<script>
  let app = new Vue({
    el:"#app",
    data:{
      input:'',
      //入库信息主表的内容
      tableData:[],
      //勾选的数据
      multipleSelection:[],
      //入库信息表头输入框
      branchSearchForm:{},
      //入库信息表头输入框
      branchSearchForm2:{},
      //店铺数据
      branchSearch:[],
      //店铺数据
      branchSearch2:[],
      //当前页面
      currentPage:1,
      //页面大小
      pageSize:5,
      //总条数
      total:0,
      //零售
      ls:1,
      //批量
      pl:2,
      //
      dialogVisible:false,
  },
    created(){
      //  初始化商品表格
      this.init();
      this.headselect();
      this.headselect2();

    },
    methods:{
      //新增入库弹出层
      init(){
        this.dialogVisible2=true;
        axios.post("/Bg/addmain?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.branchSearchForm).then(function (resp){
          app.tableData=resp.data.data.list;
          app.total=resp.data.data.total
        })
      },
      //改变页面数据数量
      handleSizeChange(val){
        console.log(`每页 ${val} 条`);
        this.pageSize=val;
        this.init();
      },
      //改变当前 页面的函数
      handleCurrentChange(val){
        console.log(`当前页: ${val}`);
        this.currentPage=val;
        this.init();
      },
      //表头查询按钮
      branchup(){
        axios.post("/Oc/pdadd?newbranchid="+this.branchSearchForm2.branchid,this.multipleSelection).then(function (resp){
          console.log(app.branchSearchForm2.branchid)
          app.$message(resp.data.msg);
        })
        this.dialogVisible=false;

      },
      //刷新按钮
      newGoods(){
        this.init();
      },
      //批量出库
      plout(){
        if(app.multipleSelection.length==0){
          return app.$message("数据为空");
        }
        for (var list of app.multipleSelection){
          if(list.num==0 || !list.num){
            return  app.$message("数据为空");
          }
          if(!/^[1-9]\d*$/.test(list.num)){
            return app.$message("数据不正确");
          }
        }
        axios.post("/Oc/pladd?outmethod="+this.pl,this.multipleSelection).then(function (resp){
            app.$message(resp.data.msg);
            app.init();

        })
      },
      //平调出库
      pdout(){
        if(app.multipleSelection.length==0){
          return app.$message("数据为空");
        }
        for (var list of app.multipleSelection){
         if(list.num==0 || !list.num){
           return  app.$message("数据为空");
         }
          if(!/^[1-9]\d*$/.test(list.num)){
            return app.$message("数据不正确");
          }
        }
        this.dialogVisible=true;

      },
      //表头店铺选择下拉框
      headselect(){
        axios.get("/brand/info").then(function (resp){
          app.branchSearch=resp.data.data
        })
      },
      //表头店铺选择下拉框
      headselect2(){
        axios.get("/brand/info2").then(function (resp){
          app.branchSearch2=resp.data.data
        })
      },
      //选择的数据
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //零售按钮
      upRow(index, tableData){
        for (var list of app.multipleSelection){
          if(list.num==0 || !list.num){
            return  app.$message("数据为空");
          }
          if(!/^[1-9]\d*$/.test(list.num)){
            return app.$message("数据不正确");
          }
        }
        if (tableData[index].num>5){
          //大于5要进行批量处理
          this.$message('数量大于5要进行批量处理');

        }else if(tableData[index].num>tableData[index].counts){
          //大于库存不能处理
          this.$message('数量大于库存不能处理');
        }else {

          //小于5的话可进行零售
          axios.post("/Oc/lsadd?outmethod=" + this.ls, this.tableData[index]).then(function (resp) {
            if(resp.data.data==1) {
              app.$message({
                type: 'success',
                message: '零售成功!'
              });
              //刷新
              app.init();
            }
          });

          //重置出库数量
          this.tableData[index].counts=""

        }

      },
      // 改变某一列单元格背景颜色
      tableCellStyle({ row, column, rowIndex, columnIndex }) {
        let rowBackground = {};

        if (row.taskColor) {
          if (columnIndex === 2) {
            rowBackground.background = row.taskColor;
          } else {
            rowBackground.background = "#f8f8f8";
          }
        } else {
          rowBackground.background = "#ffffff";
        }
        return rowBackground;
      },
      //确认关闭
      handleClose(done) {
        done();
      },

    },




  })
</script>

</body>
</html>
